import React, { useState } from 'react'
import { UserOutlined, LockOutlined } from '@ant-design/icons';
import { Input, Button, Modal, message, Form } from 'antd';
import '../css/login_index.less'
import '../../../assets/icon/font_4845297_w692z3izwm/iconfont.css'
import { register1, sendMsg } from '../../../api/csy/api'
import Yzmcode from './yzmcode'
interface Props {
    changeShow: (val: number) => void
}

const Register: React.FC<Props> = ({ changeShow }) => {
    const [messageApi, contextHolder] = message.useMessage();
    const [phone, setPhone] = useState('')
    const [password, setPassword] = useState('')
    const [codes, setCodes] = useState('')

    // 获取的验证码
    const [code, setCode] = useState('')
    const [num, setNum] = useState(5)

    const sendCode1 = () => {
        if (phone === '') {
            alert('请输入手机号');
        } else {
            sendMsg({ phone }).then(res => {
                console.log(res);
                if (res.data.code === 200) {
                    setCode(res.data.data);  // 设置验证码
                    setNum(5);  // 重置倒计时
                }
                // 开始倒计时
                const timer = setInterval(() => {
                    setNum((prev) => {
                        if (prev === 1) {  // 在倒计时到0时清除定时器
                            clearInterval(timer);
                            return 5;  // 重置num为5
                        }
                        return prev - 1;
                    });
                }, 1000);
            });
        }
    };

    // 注册用户
    const regiSter = () => {
        if (phone == '' || password == '' || code == '') {
            alert('请输入完整信息')
        } else {
            if (code == codes) {
                register1({ phone, password }).then(res => {
                    if (res.data.code == 200) {
                        messageApi.open({
                            type: 'success',
                            content: '注册成功',
                        });
                        changeShow(1)
                        setIsModalOpen(true);
                        sessionStorage.setItem('phone', phone)
                    }
                })
            } else {
                alert('验证码错误')
            }
        }
    }

    const dianji = (val: number) => {
        changeShow(val)
    }

    const [isModalOpen, setIsModalOpen] = useState(false);

    const handleOk = () => {
        changeShow(3)
    };

    const handleCancel = () => {
        changeShow(0)
    };

    return (
        <div className='login_box_right'>
            <div className='login_box_right_title'>
                <p>注册用户</p>
            </div>
            <div className='denbox'>
                <Form
                    name="register"
                    initialValues={{ remember: true }}
                    onFinish={regiSter} // Add onFinish prop for form submission
                >
                    <Form.Item
                        name="phone"
                        rules={[
                            { required: true, message: '请输入手机号!' },
                            { pattern: /^1[3-9]\d{9}$/, message: '请输入有效的手机号' }
                        ]}
                    >
                        <Input
                            size="large"
                            value={phone}
                            onChange={(e) => setPhone(e.target.value)}
                            // className='login_box_right_input'
                            placeholder="请输入账号"
                            prefix={<UserOutlined />}
                        />
                    </Form.Item>

                    <Form.Item
                        name="password"
                        style={{ marginBottom: '9px' }}
                        rules={[
                            { required: true, message: '请输入密码!' },
                            { pattern: /^(?=.*[a-zA-Z])(?=.*\d)(?=.*[!@#$%^&*()_+={}|;:'",.<>?/\[\]`~\\/-]).+$/, message: '密码必须包含字母、数字和特殊字符!' }
                        ]}
                    >
                        <Input.Password
                            size="large"
                            value={password}
                            onChange={(e) => setPassword(e.target.value)}
                            // className='login_box_right_input'
                            placeholder="请输入密码"
                            prefix={<LockOutlined />}
                        />
                    </Form.Item>
                    <Yzmcode></Yzmcode>
                    <Form.Item
                        name="code"
                        rules={[{ required: true, message: '请输入验证码!' }]}
                        style={{ marginBottom: '10px' }}
                    >
                        <Input
                            size="large"
                            value={codes}
                            onChange={(e) => setCodes(e.target.value)}
                            className='_input'
                            placeholder="请输入验证码"
                        />
                        {num === 5 ? (
                            <button onClick={sendCode1}  >
                                获取验证码
                            </button>
                        ) : (
                            <span className='dspan'>{num}</span>
                        )}
                    </Form.Item>
                        
                    {/* <Form.Item> */}
                        <Button
                            type="primary"
                            htmlType="submit"
                            className='login_box_right_button'
                            block
                        >
                            注册
                        </Button>
                    {/* </Form.Item> */}
                </Form>

                <div className='box_right_span'>
                    <span className='login_box_right_span' onClick={() => dianji(0)}>
                        立即登录
                    </span>
                </div>

                <Modal title="接入人脸识别" open={isModalOpen} onOk={handleOk} onCancel={handleCancel}>
                    <p>是否接入人脸</p>
                </Modal>
                {contextHolder}
            </div>
        </div>
    )
}

export default Register
